<template>
  <div>
    <a-card>
      用户列表
      查询用户信息请输入用户名查询
    </a-card>
    <br>
    <a-card title="详细数据">
      <div slot="extra">
        <a-input-search placeholder="请输入用户名称"
                        enter-button
                        v-model="searchUserName"
                        style="width: 320px;display: inline-block;"
                        @search="getAllOrderListInfo" />
      </div>
      <a-table :columns="columns"
               :data-source="data"
               :pagination="paginationConfig.total > paginationConfig.pageSize ? paginationConfig : false"
               :loading="loading"
               :scroll="{x: 2400}"
               bordered
               @change="handleTablePageChange">
        <span slot="orderTime" slot-scope="orderTime">{{orderTime === null ? '暂无数据' : transformFormatDate(orderTime)}}</span>
        <span slot="serverTime" slot-scope="serverTime">{{serverTime === null ? '暂无数据' : transformFormatDate(serverTime)}}</span>
        <span slot="balance" slot-scope="balance">
            <a-icon type="dollar"/> {{ balance }}
        </span>
<!--        <template slot="operation">-->
<!--          <a-button type="primary" style="margin-right: 10px;">编辑</a-button>-->
<!--          <a-button type="danger">删除</a-button>-->
<!--        </template>-->
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {getAllOrderList} from "@/api/api";
import {formatDate} from "@/lib/common";

  export default {
    name: "AllOrderList",
    data() {
      return {
        columns: [
          {title: '序号', dataIndex: 'id', width: 70},
          {title: '订单编号', dataIndex: 'orderNumber', width: 160},
          {title: '用户昵称', dataIndex: 'user', scopedSlots: {customRender: 'user'}, width: 160},
          {title: '联系方式', dataIndex: 'phoneNumber', width: 120},
          {title: '维修地址', dataIndex: 'address', width: 160},
          {title: '下单时间', dataIndex: 'orderCreate', scopedSlots: {customRender: 'orderTime'}, width: 160},
          {title: '维修类型', dataIndex: 'repairType'},
          {title: '问题描述', dataIndex: 'text'},
          {title: '估计价格', dataIndex: 'probablyPrice', scopedSlots: {customRender: 'evaluatePrice'}, width: 100},
          {title: '最终价格', dataIndex: 'finalPrice', scopedSlots: {customRender: 'finalPrice'}, width: 100},
          {title: '服务状态', dataIndex: 'code'},
          {title: '服务时间', dataIndex: 'serverTime', scopedSlots: {customRender: 'serverTime'}, width: 160},
          {title: '服务评价', dataIndex: 'evaluation', scopedSlots: {customRender: 'serverRate'}, ellipsis: true},
          {title: '是否撤单', dataIndex: 'undoOrder'},
          {title: '是否退单', dataIndex: 'chargeBack'},
          {title: '图片描述', dataIndex: 'pic'},
        ],
        data: [],
        paginationConfig: {
          total: 1,
          pageSize: 10,
          current: 1
        },
        loading: false,
        searchUserName: '',
      }
    },
    methods: {
      /**
       * 时间戳转换为日期
       * @param data 时间戳
       */
      transformFormatDate(data) {
        return formatDate(parseInt(data));
      },
      /**
       * 表格页码切换方法
       * @param pagination
       * @param filters
       * @param sorter
       * @param currentDataSource
       */
      handleTablePageChange(pagination, filters, sorter, {currentDataSource}) {
        this.paginationConfig.current = pagination.current;
        this.getAllOrderListInfo();
      },
      /**
       * 获取订单统计数据
       */
      getAllOrderListInfo() {
        this.loading = true;
        let options = {
          current: this.paginationConfig.current,
          pageSize: this.paginationConfig.pageSize,
        };
        getAllOrderList(options)
          .then(res => {
            this.paginationConfig.total = res.data.totalElements;
            let newData = [];
            newData = res.data.content;
            for (let i in newData) {
              newData[i].key = i;
            }
            this.data = newData;
          })
          .catch(err => {
            this.$message.error(err);
          })
          .finally(() => {
            this.loading = false;
          })
      },
      /**
       * 根据用户姓名查询订单
       */
    },
    mounted() {
      this.getAllOrderListInfo();
    }
  }
</script>

<style scoped>

</style>